<!--
功能：主控台
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-03 10:23:17
-->
<template>
  <div class="page-container">
    <a-row :gutter="10">
      <!-- 统计栏 -->
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>访问量</span>
            </div>
            <div class="page-card-header-right">
              <a-tag color="pink">日</a-tag>
            </div>
          </div>
          <div class="count-box">
            <div class="count-number">
              <span>25,848</span>
              <span style="font-size: 18px; margin-left: 6px">次</span>
            </div>
            <div class="count-content">
              <div class="count-rat">
                <span>日同比 12.5%</span>
                <i class="iconfont xiangshang" style="margin: 0px 6px; color: #19be6b"></i>
                <span style="margin-left: 6px">周同比 1.8%</span>
                <i class="iconfont xiangxia" style="margin: 0px 6px; color: #f5222d"></i>
              </div>
            </div>
          </div>
          <div class="page-card-footer">
            <div class="page-card-footer-left">总访问量</div>
            <div class="page-card-footer-right">280 万</div>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>销售额</span>
            </div>
            <div class="page-card-header-right">
              <a-tag color="blue">周</a-tag>
            </div>
          </div>
          <div class="count-box">
            <div class="count-number">
              <span>56,241</span>
              <span style="font-size: 18px; margin-left: 6px">元</span>
            </div>
            <div class="count-content">
              <div class="count-progress">
                <a-progress :percent="45" :size="12" status="active" />
              </div>
            </div>
          </div>
          <div class="page-card-footer">
            <div class="page-card-footer-left">总销售额</div>
            <div class="page-card-footer-right">1623 万</div>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>订单量</span>
            </div>
            <div class="page-card-header-right">
              <a-tag color="green">月</a-tag>
            </div>
          </div>
          <div class="count-box">
            <div class="count-number">
              <span>4,356</span>
              <span style="font-size: 18px; margin-left: 6px">个</span>
            </div>
            <div class="count-content">
              <div class="count-order">
                <img src="@/assets/images/order.png" alt="" srcset="" />
              </div>
            </div>
          </div>
          <div class="page-card-footer">
            <div class="page-card-footer-left">总订单量</div>
            <div class="page-card-footer-right">16.3 万</div>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>用户量</span>
            </div>
            <div class="page-card-header-right">
              <a-tag color="orange">年</a-tag>
            </div>
          </div>
          <div class="count-box">
            <div class="count-number">
              <span>386,584</span>
              <span style="font-size: 18px; margin-left: 6px">个</span>
            </div>
            <div class="count-content">
              <div class="count-avatar">
                <a-avatar-group
                  :max-count="5"
                  :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }"
                >
                  <a-avatar v-for="item in userList" :size="28" :src="item.src" :key="item.src" />
                </a-avatar-group>
              </div>
            </div>
          </div>
          <div class="page-card-footer">
            <div class="page-card-footer-left">总用户量</div>
            <div class="page-card-footer-right">420 万</div>
          </div>
        </div>
      </a-col>
      <!-- 快捷导航 -->
      <a-col :xs="12" :sm="12" :md="3" :lg="3" :xl="3" v-for="item in menuList" :key="item.id">
        <div class="menu-box">
          <i
            class="iconfont shipin2-mianxing"
            :class="item.icon"
            style="font-size: 30px"
            :style="{ color: item.color }"
          ></i>
          <div class="menu-name">{{ item.name }}</div>
        </div>
      </a-col>
      <!-- 柱状图 -->
      <a-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>访问量趋势</span>
            </div>
            <div class="page-card-header-right">
              <a-date-picker style="width: 200px" placeholder="选择查询日期" />
            </div>
          </div>
          <div class="bar-box">
            <div id="visitChart" class="visit-chart"></div>
          </div>
        </div>
      </a-col>
      <!-- 排行榜 -->
      <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>访问量趋势</span>
            </div>
            <div class="page-card-header-right">
              <a-radio-group>
                <a-radio-button value="large">今日</a-radio-button>
                <a-radio-button value="default">本月</a-radio-button>
                <a-radio-button value="small">全年</a-radio-button>
              </a-radio-group>
            </div>
          </div>
          <div class="rank-box">
            <div class="rank-row" v-for="item in 20" :key="item">
              <div :class="[item < 4 ? 'rank-index' + item : 'rank-index']">{{ item }}</div>
              <div class="rank-name">微信用户{{ item }}</div>
              <div class="rank-num">{{ parseInt(10000 / item) }}次</div>
            </div>
          </div>
        </div>
      </a-col>
      <!-- 搜索词云 -->
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>搜索词云</span>
            </div>
            <div class="page-card-header-right"></div>
          </div>
          <div class="word-box">
            <div id="wordChart" class="word-chart"></div>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>用户画像</span>
            </div>
            <div class="page-card-header-right"></div>
          </div>
          <div class="word-box">
            <div id="userChart" class="word-chart"></div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, computed } from 'vue'
import useSettingsStore from '@/store/modules/settings'
// 仓库实例化
const settingsStore = useSettingsStore()
// 侧边栏主题
const themeColor = computed(() => {
  return settingsStore.themeColor
})
// 头像列表
const userList = ref([
  {
    src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
    tip: '史蒂夫·乔布斯'
  },
  {
    src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
    tip: '斯蒂夫·沃兹尼亚克'
  },
  {
    src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
    tip: '乔纳森·伊夫'
  },
  {
    src: 'https://dev-file.iviewui.com/xrzbBR99F6tYsDJPLNrvwhllowbuL7Gw/avatar',
    tip: '蒂姆·库克'
  },
  {
    src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
    tip: '乔纳森·伊夫'
  },
  {
    src: 'https://dev-file.iviewui.com/bgrngoUb9A6UQ2kAwBFtnSNzhrh2qj1O/avatar',
    tip: '比尔·费尔南德斯'
  },
  {
    src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar2',
    tip: '乔纳森·伊夫'
  },
  {
    src: 'https://dev-file.iviewui.com/bgrngoUb9A6UQ2kAwBFtnSNzhrh2qj1O/avatar3',
    tip: '比尔·费尔南德斯'
  }
])
// 菜单列表
const menuList = ref([
  {
    id: 1,
    name: '主控台',
    icon: 'choujiang-xianxing',
    color: '#2a95ec'
  },
  {
    id: 2,
    name: '分析页',
    icon: 'shuju1-xianxing',
    color: '#19be6b'
  },
  {
    id: 3,
    name: '工作台',
    icon: 'shipinjiaocheng-xianxing',
    color: '#ff7306'
  },
  {
    id: 4,
    name: '消息中心',
    icon: 'youjian-xianxing',
    color: '#5e2aec'
  },
  {
    id: 5,
    name: '个人中心',
    icon: 'wode2-xianxing',
    color: '#e216d1'
  },
  {
    id: 6,
    name: '系统设置',
    icon: 'shezhi-xianxing',
    color: '#1619e2'
  },
  {
    id: 7,
    name: '待办',
    icon: 'shu-xianxing',
    color: '#9be216'
  },
  {
    id: 8,
    name: '日志',
    icon: 'jutiweizhi2-xianxing',
    color: '#e26816'
  }
])
// 初始化访问量图表
const initVisitChart = () => {
  var yData = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709]
  var xData = (function () {
    var data = []
    for (var i = 1; i < 13; i++) {
      data.push(i + '月')
    }
    return data
  })()
  var myChart = echarts.init(document.getElementById('visitChart'))
  // 绘制图表
  myChart.setOption({
    backgroundColor: '#ffffff',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '10%',
      right: '0%',
      left: '4%',
      bottom: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: xData,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: '#dcdee2'
          }
        },
        lineStyle: {
          color: '#f9f9f9'
        },
        axisLabel: {
          margin: 10,
          color: '#808695',
          fontSize: 14
        }
      }
    ],
    yAxis: [
      {
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#f1f1f1'
          }
        },
        axisLine: {
          //坐标轴轴线相关设置。数学上的y轴
          show: true,
          lineStyle: {
            color: '#f1f1f1'
          }
        },
        axisLabel: {
          formatter: '{value}',
          color: '#808695'
        }
      }
    ],
    series: [
      {
        type: 'bar',
        data: yData,
        barWidth: '35%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: `${themeColor.value}88` // 0% 处的颜色
              },
              {
                offset: 1,
                color: themeColor.value // 100% 处的颜色
              }
            ],
            false
          )
        }
      }
    ]
  })
  window.onresize = function () {
    myChart.resize()
  }
}
// 初始化词云图
const initWordChart = () => {
  var myChart = echarts.init(document.getElementById('wordChart'))
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    xAxis: [
      {
        type: 'category',
        data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#DDD'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333'
          }
        },
        nameTextStyle: {
          color: '#999'
        },
        splitArea: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '课时',
        type: 'line',
        data: [23, 60, 20, 36, 23, 85],
        lineStyle: {
            width: 8,
            color: {
              type: 'linear',

              colorStops: [
                {
                  offset: 0,
                  color: '#A9F387' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#48D8BF' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
        },
        itemStyle: {
          color: '#fff',
          borderWidth: 10,
          /*shadowColor: 'rgba(72,216,191, 0.3)',
                shadowBlur: 100,*/
          borderColor: '#A9F387'
        },
        smooth: true
      }
    ]
  })
  window.onresize = function () {
    myChart.resize()
  }
}
// 初始化用户图标
const initUserChart = () => {
  var myChart = echarts.init(document.getElementById('userChart'))
  // 绘制图表
  myChart.setOption({
    legend: {
      top: 'top' // 图例显示位置
    },
    series: [
      {
        name: '面积模式',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 10, name: '前端开发' },
          { value: 20, name: 'Java开发' },
          { value: 15, name: '安卓开发' },
          { value: 8, name: 'Ios开发' },
          { value: 10, name: '测试' },
          { value: 20, name: '产品经理' },
          { value: 15, name: '.NET开发' },
          { value: 18, name: '运维' }
        ]
      }
    ]
  })
  window.onresize = function () {
    myChart.resize()
  }
}
// 初始化图表
onMounted(() => {
  initVisitChart()
  initWordChart()
  initUserChart()
})
</script>
<style lang="scss" scoped>
.page-container {
  .page-card {
    width: 100%;
    height: auto;
    border-radius: 4px;
    background-color: #ffffff;
    margin-bottom: 10px;
    box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      border-bottom: 1px solid #e8eaec;
      font-size: 15px;
      color: #515a6e;
    }
    .page-card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 15px;
      border-top: 1px solid #e8eaec;
      font-size: 15px;
      color: #515a6e;
    }
    .count-box {
      padding: 15px;
      .count-number {
        color: #17233d;
        font-size: 30px;
      }
      .count-content {
        height: 40px;
        display: flex;
        align-items: center;
        .count-rat {
          font-size: 15px;
          color: #515a6e;
        }
        .count-progress {
          width: 100%;
          margin-top: 10px;
        }
        .count-order {
          width: 100%;
          img {
            width: 100%;
            height: 25px;
          }
        }
        .count-avatar {
          margin-top: 10px;
        }
      }
    }
  }
  .menu-box {
    text-align: center;
    height: 100px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    .menu-name {
      color: #515a6e;
      font-size: 14px;
      margin-top: 4px;
    }
  }
  .bar-box {
    padding: 15px;
    .visit-chart {
      width: 100%;
      height: 400px;
    }
  }
  .rank-box {
    padding: 15px;
    height: 430px;
    overflow: auto;
    .rank-row {
      padding: 10px 0px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f1f1f1;
      .rank-index1 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(237, 64, 20, 0.1);
        color: #ed4014;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
      }
      .rank-index2 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(25, 190, 107, 0.1);
        color: #19be6b;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
      }
      .rank-index3 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(45, 140, 240, 0.1);
        color: #2d8cf0;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
      }
      .rank-index {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #f8f8f9;
        font-size: 15px;
        text-align: center;
        line-height: 30px;
      }
      .rank-name {
        color: #17233d;
        font-size: 15px;
        font-weight: 600;
        padding: 0px 10px;
        flex: 1;
      }
      .rank-name {
        color: #515a6e;
        font-size: 14px;
      }
    }
  }
  .rank-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
  }
  .word-box {
    padding: 15px;
  }
  .word-chart {
    height: 400px;
  }
}
</style>
